<template>
  <div class="calendar section-card">
    <!-- 这里可以使用第三方日历库，或者自定义实现 -->
    <h2>{{ currentYear }}年{{ currentMonth }}月</h2>
    <table>
      <thead>
        <tr>
          <th>日</th>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in calendarData" :key="week[0].date">
          <td v-for="day in week" :key="day.date" :class="{ 'has-expense': day.expense }">
            <div class="date">{{ day.date }}</div>
            <div class="expense" :style="{ color: day.expense > 0 ? 'red' : 'green' }">
              {{ day.expense }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { ref } from 'vue';

const currentYear = dayjs().year();
const currentMonth = dayjs().month() + 1; // month() 返回 0-11

const calendarData = ref(generateCalendar(currentYear, currentMonth));

function generateCalendar(year: number, month: number) {
  const startOfMonth = dayjs(`${year}-${month}-01`);
  const endOfMonth = startOfMonth.endOf('month');
  const startDay = startOfMonth.day();
  const daysInMonth = endOfMonth.date();

  const weeks = [];
  let week = [];

  for (let i = 0; i < startDay; i++) {
    week.push({ date: '', expense: 0 });
  }

  for (let day = 1; day <= daysInMonth; day++) {
    const expense = Math.floor(Math.random() * 200) - 100; // 随机生成花销
    week.push({ date: day, expense });

    if (week.length === 7) {
      weeks.push(week);
      week = [];
    }
  }

  if (week.length > 0) {
    while (week.length < 7) {
      week.push({ date: '', expense: 0 });
    }
    weeks.push(week);
  }

  return weeks;
}
</script>

<style scoped>
.calendar {
  width: 100%;
}

h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f0f0f0;
  padding: 5px;
  font-weight: bold;
  color: #666;
}

td {
  text-align: center;
  padding: 8px;
  border: 1px solid #eee;
}

.date {
  font-size: 14px;
  margin-bottom: 5px;
}

.expense {
  font-size: 12px;
}

.has-expense {
  font-weight: bold;
}
</style> 